<template>
  <div class="AlarmHandling">
    <div class="alar">
      <div class="alar-number">
        <p class="alar-number__total">告警数量：{{ alar.total }}</p>
        <i class="alar-number__separator"></i>
        <ul class="alar-number__handle">
          <li class="alar-number__handle__type alar-number__handle__Y">
            <div class="alar-number__handle__type__name">已处理</div>
            <span class="alar-number__handle__type__value">{{
              alar.processed
            }}</span>
          </li>
          <li class="alar-number__handle__type alar-number__handle__N">
            <span class="alar-number__handle__type__name">未处理</span>
            <span class="alar-number__handle__type__value">{{
              alar.untreated
            }}</span>
          </li>
        </ul>
      </div>
      <div class="alar-type">
        <p class="alar-type__title">告警类型：</p>
        <i class="alar-type__separator"></i>
        <ul class="alar-type__list">
          <li class="alar-type__list__data">
            <span class="alar-type__list__data__name">应力不足</span>
            <span class="alar-type__list__data__value">1</span>
          </li>
          <li class="alar-type__list__data">
            <span class="alar-type__list__data__name">电压过低</span>
            <span class="alar-type__list__data__value">1</span>
          </li>
          <li class="alar-type__list__data">
            <span class="alar-type__list__data__name">位移告警</span>
            <span class="alar-type__list__data__value">1</span>
          </li>
        </ul>
      </div>
    </div>
    <div class="alar-list">
      <div class="alar-list-title">
        <p class="alar-list-title__column alar-list-title__column1">告警源</p>
        <p class="alar-list-title__column alar-list-title__column2">等级</p>
        <p class="alar-list-title__column alar-list-title__column1">告警信息</p>
        <p class="alar-list-title__column alar-list-title__column2">生产时间</p>
      </div>
      <ul class="alar-list-data">
        <li
          class="alar-list-data__row"
          v-for="i in alarHistoryList"
          :key="i.id"
        >
          <p class="alar-list-data__row__column alar-list-data__row__white">
            {{ i.name }}
          </p>
          <p
            :style="{
              color:
                i.alarGrade == '2'
                  ? '#BA2B2F'
                  : i.alarGrade == '1'
                  ? '#E9AE00'
                  : '#25C8FF',
            }"
            class="alar-list-data__row__column alar-list-data__row__grade"
          >
            {{ alarGradeType[i.alarGrade] }}
          </p>
          <p class="alar-list-data__row__column alar-list-data__row__white">
            {{ i.alarInformation }}
          </p>
          <p class="alar-list-data__row__column alar-list-data__row__time">
            {{ i.time }}
          </p>
        </li>
      </ul>
    </div>
  </div>
</template>
<script>
import { alarData, alarHistoryListData } from "../../../temp/data";
export default {
  name: "AlarmHandling",
  data() {
    return {
      alar: {},
      alarHistoryList: {},
      alarGradeType: ["一般警告", "重要警告", "严重警告"],
    };
  },
  created() {
    this.alar = alarData();
    this.alarHistoryList = alarHistoryListData();
  },
  /**所有方法*/
  methods: {},
};
</script>
<style scoped lang='less'>
/* @import url(); 引入css类 */
.AlarmHandling {
  width: 100%;
  height: 100%;
}
.alar {
  height: 50%;
  width: 100%;
  display: flex;

  .alar-number {
    width: 50%;
    height: 100%;

    &__total {
      font-size: 14px;
      color: #ffffff;
    }

    &__separator {
      display: block;
      width: 90%;
      height: 0.4vh;
      margin: 0.5vh 0 1vh 0;
      border-radius: 5px;
      background: linear-gradient(90deg, #65aeee 0%, #65aeee20 100%);
    }

    &__handle {
      display: flex;

      &__type {
        display: flex;
        width: 50%;

        &__name {
          width: 60%;
          color: #78879b;
        }

        &__value {
          color: #fff;
        }
      }
    }
  }

  .alar-type {
    width: 50%;
    height: 100%;
    &__title {
      font-size: 14px;
      color: #ffffff;
    }
    &__separator {
      display: block;
      width: 90%;
      height: 0.4vh;
      margin: 0.5vh 0 1vh 0;
      border-radius: 5px;
      background: linear-gradient(90deg, #65aeee 0%, #65aeee20 100%);
    }
    &__list {
      height: 80%;
      display: flex;
      flex-direction: column;
      &__data {
        height: 25%;
        display: flex;
        &__name {
          color: #78879b;
          padding-right: 1.5vw;
        }
        &__value {
          color: #fff;
        }
      }
    }
  }
}

.alar-list {
  height: 50%;
  width: 100%;
  // overflow-y: scroll;
  .alar-list-title {
    width: 100%;
    height: 20%;
    display: flex;
    &__column {
      width: 25%;
      height: 100%;
      display: flex;
      justify-content: center;
    }
    &__column1 {
      color: #fff;
    }
    &__column2 {
      color: #5ebfbb;
    }
  }

  .alar-list-data {
    width: 100%;
    height: 80%;
    overflow-y: scroll;
    &__row {
      width: 100%;
      height: 20%;
      display: flex;

      &__column {
        width: 25%;
        display: flex;
        justify-content: center;
      }

      &__white{
        color: #fff;
      }

      &__time{
        color: #5EBFBB;
      }
    }
  }
}

.alar-list-data::-webkit-scrollbar {
  width: 0px;
}
</style>
